<!-- 【供应商信息】弹窗页面 -->
<template>
  <div class="body">
    <el-dialog :title="dialog.title" :close-on-click-modal="false" :visible.sync="dialog.open">
      <el-form :model="supplier" ref="supplierForm" :rules="rules" label-width="120px" class="edit-form">
        <el-form-item label="主键id" class="hidden" prop="id">
          <el-input type="hidden" v-model="supplier.id"/>
        </el-form-item>
        <el-form-item label="供应商名称" prop="name">
          <el-input v-model="supplier.name" placeholder="请输入供应商名称" :disabled="dialog.disabled" class="sui-input"/>
        </el-form-item>
        <el-form-item label="联系人" prop="userName">
          <el-input v-model="supplier.userName" placeholder="请输入联系人" :disabled="dialog.disabled" class="sui-input"/>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="supplier.phone" placeholder="请输入联系电话" :disabled="dialog.disabled" class="sui-input"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="supplier.email" placeholder="请输入邮箱" :disabled="dialog.disabled" class="sui-input"/>
        </el-form-item>
        <el-form-item label="供应商地址" prop="address">
          <el-input type="textarea" v-model="supplier.address" placeholder="请输入供应商地址" :disabled="dialog.disabled" class="sui-textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button size="small" v-if="!dialog.disabled" type="primary" @click="submitForm()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "supplierForm",
    data() {
      return {
        //弹窗设置
        dialog: {
          title: "",
          open: false,
          disabled: false
        },
        //表单数据
        supplier: {
          id: "",
          name: "",
          userName: "",
          phone: "",
          email: "",
          address: "",
        },
        //表单校验
        rules: {
          name: [{required: true, message: '请输入供应商名称', trigger: 'blur'},{validator:this.$validator.unique,form:this,model:'supplier',tableName:'supplier',column:'name',message:'供应商名称已存在',trigger:'blur'}],
          userName: [{required: true, message: '请输入联系人', trigger: 'blur'}],
          phone: [{required: true, message: '请输入联系电话', trigger: 'blur'}],
          email: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
          address: [{required: true, message: '请输入供应商地址', trigger: 'blur'}],
        }
      }
    },
    computed: {
    },
    methods: {
      //打开弹窗
      open(option) {
        const pageFrom = option.pageFrom;
        const disabled = pageFrom == 'view' ? true : false;
        this.showDialog(option.title, disabled);
        if (pageFrom == 'edit' || pageFrom == 'view') {
          this.getSupplier(option.id);
        }
      },
      //显示弹窗
      showDialog(title, disabled) {
        this.resetForm(this.$refs.supplierForm);//重置表单
        this.dialog.open = true;//打开弹窗
        this.dialog.title = title;//设置标题
        this.dialog.disabled = disabled;//是否可编辑
      },
      //取消弹窗
      cancel: function () {
        this.dialog.open = false;
      },
      //根据id获取数据
      getSupplier(id) {
        this.$request.doGet("/admin/supplier/get?id=" + id).then(res => {
          if (res.isOk) {
            this.supplier = res.obj;
          }
        });
      },
      //提交表单
      submitForm: function () {
        const that = this;
        that.$refs.supplierForm.validate((valid) => {
          if (valid) {//表单校验
            that.$request.doPost('/admin/supplier/sub', that.supplier).then(res => {
              if (res.isOk) {
                that.cancel();
                that.showSuccess("提交成功");
                that.$emit('reloadList');
              }
            });
          }
        });
      }

    }
  }
</script>

<style scoped>

</style>
